<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.69.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
</head>

<body>
    <div class="fun-menu">
        <button onclick="createLayer(2)">创建</button>
        <button onclick="show(true)">显示</button>
        <button onclick="show(false)">隐藏</button>
        <button onclick="add(2)">添加</button>
        <button onclick="remove()">移除</button>
        <button onclick="removeAll()">移除所有</button>
    </div>
    <div id=cesiumContainer></div>

    <script src="http://cdn.staticfile.org/cesium/1.69.0/Cesium.js"></script>
    <script src="../libs/cpc/index.js"></script>
    <script>
        const map = new cpc.Map({
            container: "cesiumContainer",
            camera: {
                position: {
                    x: 119.3006147,
                    y: 26.0316619,
                    z: 4809,
                },
                angle: {
                    heading: 7.33,
                    pitch: -72.53,
                    roll: 0,
                },
                duration: 3,
                complete: () => {
                    console.log("飞行结束了");
                }
            },
            baseMaps: [
                "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            ]
        });


        function createLayer() {
            var lon = 119.01,
                lat = 26.02;
            var rings = [
                lon,
                lat,
                1000,
                lon + 0.5,
                lat + 0.5,
                1000,
                lon + 0.5,
                lat,
                1000,
                lon,
                lat - 0.5,
                1000,
            ];
            lon += 2;
            var rings1 = [
                lon,
                lat,
                1000,
                lon + 0.5,
                lat + 0.5,
                1000,
                lon + 0.5,
                lat,
                1000,
                lon,
                lat - 0.5,
                1000,
            ];
            const option = {
                name: "xxdsf",
                primitives: [
                    {
                        id: "xxx1",
                        source: rings,
                        symbol: {
                            url: "../images/symbol/waterNormals.png",
                            height: 10,
                            baseWaterColor: Cesium.Color.AQUA.withAlpha(0.3), //rgba颜色对象的水的基本颜色。
                            blendColor: new Cesium.Color(0, 0, 0, 0.5), //rgba颜色对象，当混合从水到非水区域
                            frequency: 1e3, //频率:控制波的数量。
                            animationSpeed: 0.03, //控制水的动画速度的数字
                            amplitude: 10.0, //振幅:控制水波振幅的数字
                            specularIntensity: 5, //镜面反射强度:控制镜面反射强度的数字
                        },
                    },
                    {
                        id: "xxx2",
                        source: rings1,
                        symbol: {
                            url: "../images/symbol/waterNormals.png",
                            height: 10,
                            baseWaterColor: Cesium.Color.AQUA.withAlpha(0.3), //rgba颜色对象的水的基本颜色。
                            blendColor: new Cesium.Color(0, 0, 0, 0.5), //rgba颜色对象，当混合从水到非水区域
                            frequency: 1e3, //频率:控制波的数量。
                            animationSpeed: 0.03, //控制水的动画速度的数字
                            amplitude: 10.0, //振幅:控制水波振幅的数字
                            specularIntensity: 5, //镜面反射强度:控制镜面反射强度的数字
                        },
                    },
                ],
            };
            fl = new cpc.PrimitiveWaterLayer(option);
            map.add(fl);
        }
        function show(show) {
            fl.show = show;
        }
        function add() {
            var lon = 119.01,
                lat = 25.02;
            var rings1 = [
                lon,
                lat,
                1000,
                lon + 0.5,
                lat + 0.5,
                1000,
                lon + 0.5,
                lat,
                1000,
                lon,
                lat - 0.5,
                1000,
            ];
            fl.add({
                id: "xxx3",
                source: rings1,
                symbol: {
                    url: "./images/waterNormals.png",
                    height: 10,
                    baseWaterColor: Cesium.Color.AQUA.withAlpha(0.3), //rgba颜色对象的水的基本颜色。
                    blendColor: new Cesium.Color(0, 0, 0, 0.5), //rgba颜色对象，当混合从水到非水区域
                    frequency: 1e3, //频率:控制波的数量。
                    animationSpeed: 0.03, //控制水的动画速度的数字
                    amplitude: 10.0, //振幅:控制水波振幅的数字
                    specularIntensity: 5, //镜面反射强度:控制镜面反射强度的数字
                },
            });
        }
        function remove() {
            fl.remove("xxx2");
        }
        function removeAll() {
            fl.removeAll();
        }
    </script>
</body>

</html>